<template>
  <div class='update'>
    <!-- <mu-tabs :value.sync="active">
<mu-tab v-for="wk in curData" :key="wk.id">{{wk.comicUpdateDate_new}}</mu-tab>
</mu-tabs> -->
    <!-- 显示header -->
    <div class="u_header flex">
      <div v-for="wk,index in curData" :key="wk.id">
        <h5 :class="{'active':curTab==index}" @click='swipeTab(index)'>{{ wk.comicUpdateDate_new }}</h5>
      </div>
    </div>
    <!-- 显示更新的漫画 -->
    <div class="u_mh flex more" ref="u_mh">
      <div class='flex' v-for="list in curData" :key="list.id">
        <!-- 显示当前的漫画列表 -->
        <div class='mh_list'>
          <div class='mh_item' v-for="item in list.info">
            <div class='thumbnail'>
              <!--  :style="{background:`url('${'https://image.mhxk.com/mh/'+item.comic_id+'.jpg-noresize.webp'}') center center / cover no-repeat`}" -->
              <img v-lazy="`${'https://image.mhxk.com/mh/'+item.comic_id+'.jpg-noresize.webp'}`" :key="item.id">
              <span class="score">4.7</span>
              <div class='mh_des'>
                <div class='text_sub'>{{item.comic_name}}</div>
                <div class='subtitle text_sub'><span>{{item.comic_feature}}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang='less'>
  @import './update';

</style>
<script>
  const debounce = (func, wait) => {
    let timeout = '';
    return (v) => {
      if (timeout) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(() => {
        func(v);
      }, wait);
    }
  };
  export default {
    data() {
      return {
        curTab: 0,
        curData: [],
        screenWidth: document.documentElement.offsetWidth
      };
    },
    methods: {
      swipeTab(index) {
        let curW = this.screenWidth * index * -1;
        this.curTab = index;
        this.$refs.u_mh.style.transform = `translate(${curW}px, 0) scale(1) translateZ(0)`
      },
    },
    mounted() {
      // 获取当前更新
      this.$http.get('http://y.yuduo.top/index/Manhua/getUpdate').then(res => {
        let result = res.status == 200 && res.data ? JSON.parse(res.data) : '';
        this.curTab = result.data.update.length - 1;
        this.screenWidth = document.documentElement.clientWidth;
        let curW = this.screenWidth * this.curTab * -1;
        this.$refs.u_mh.classList.remove('more');
        this.$refs.u_mh.style.transform = `translate(${curW}px, 0) scale(1) translateZ(0)`;
        this.curData = result.data.update;
        setTimeout(() => {
          this.$refs.u_mh.classList.add('more');
        }, 1000);
      })
      let resizeTag = true
      window.onresize = () => {
        if (resizeTag) {
          resizeTag = false
          setTimeout(() => {
            resizeTag = true;
            this.screenWidth = document.documentElement.clientWidth;
            let curW = this.screenWidth * this.curTab * -1;
            this.$refs.u_mh.style.transform = `translate(${curW}px, 0) scale(1) translateZ(0)`
          }, 300)
        }
      }
    }
  };

</script>
